import React from 'react';
import { IndexLink, Link } from 'react-router';

import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import FontIcon from 'material-ui/FontIcon';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import FlatButton from 'material-ui/FlatButton';
import ActionAndroid from 'material-ui/svg-icons/action/android';

import {
  blue300,
  indigo900,
  orange200,
  deepOrange300,
  pink400,
  purple500,
} from 'material-ui/styles/colors';

const styles = {
	paper: {
		height: 120
	},
  button: {
  },
  avatar: {
  	margin: 10
  }
};

export const DrawerYz = ({ open }) => (
  <Drawer
    docked={true}
    width={200}
    open={open}
  >
  	<Paper
	  	style={styles.paper}
	  	zDepth={1}
  	>
  		<Avatar
        icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
        color={blue300}
        backgroundColor={indigo900}
        size={30}
        style={styles.avatar}
      />
      <div>
				<FlatButton
		      label="USERNAME"
		      primary={true}
		      style={styles.button}
		      icon={<ActionAndroid />}
		    />  	
				<IconMenu
		      iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
		      anchorOrigin={{horizontal: 'left', vertical: 'top'}}
		      targetOrigin={{horizontal: 'left', vertical: 'top'}}
		    >
		      <MenuItem primaryText="Refresh" />
		      <MenuItem primaryText="Send feedback" />
		      <MenuItem primaryText="Settings" />
		      <MenuItem primaryText="Help" />
		      <MenuItem primaryText="Sign out" />
		    </IconMenu>
      </div>
  	</Paper>
    <MenuItem>
      <IndexLink to='/' activeClassName="active">
        <span>Home</span>
      </IndexLink>
    </MenuItem>
    <MenuItem>
      <Link to='/counter' activeClassName="active">
        <span>Counter</span>
      </Link>
    </MenuItem>
    <MenuItem>
      <Link to='/test' activeClassName="active">
        <span>Test</span>
      </Link>
    </MenuItem>
  </Drawer>
);

DrawerYz.propTypes = {
  open: React.PropTypes.bool.isRequired
}

export default DrawerYz;